<template>

    <AccountSearch />

    <Table border :columns="columns" :data="data" @on-selection-change="selection = $event">
        
        <template #status="{ row, index }">
            <DotTag type="warn" v-if="row.state === 1">未激活</DotTag>
            <DotTag type="primary" v-else-if="row.state == 2">正常</DotTag>
            <DotTag type="error" v-else>禁用</DotTag>
        </template>

        <template #avatar="{ row, index }">
            <Image :src="row.avatar" fit="contain" width="80px" height="60px" preview 
                    :preview-list="previewList(row.avatar)" :initial-index="0" />
        </template>

        <template #sex="{ row, index }">
            <span>{{ row.sex === 'm' ? '男' : row.sex === 'f' ? '女' : '保密' }}</span>
        </template>

        <template #action="{ row, index }">
            <Button type="primary" icon="md-bonfire" size="small" style="margin-right: 5px" @click="editConfig(row)">激活</Button>
            <Button type="warning" icon="md-disc" size="small" style="margin-right: 5px" @click="addBlackList(row, index)">拉黑</Button>
            <Button type="error" icon="ios-remove-circle-outline" size="small" style="margin-right: 5px" @click="remove(row, index)">注销</Button>
        </template>

        <template #footer>
            <div style="min-width: 300px; max-width: 380px;">
                <van-pagination v-model="pagination.page" :total-items="pagination.total" 
                    :items-per-page="pagination.rows" :show-page-size="5" force-ellipses/>
            </div>
        </template>
    </Table>

    <!-- 添加 黑名单面板 (点击黑名单的时候，如果) -->
    <BlackForm v-model="show" :row="dataRow" v-if="show"/>

</template>

<script setup>
import {ref, reactive} from 'vue' 
import DotTag from '../components/DotTag.vue' 
import vanPagination from '../components/VanPagination.vue'
import AccountSearch from '../components/user/AccountSearch.vue'
import BlackForm from '../components/user/BlackForm.vue'

// 定义分页需要的对象
const pagination = reactive({  page: 1, rows: 10 , total: 105464570}) ;

const columns = reactive([
    {type:"selection" , width: 60, align: "center"},
    {title: "手机号", width: 140, align: "center", key: "tel"} ,
    {title: "电子邮箱", width:240, key: "email"} , 
    {title: "昵称",  key: "nickName"} , 
    {title: "真实姓名", key: "realName"} , 
    {title: "出生日期", key: "birth"} , 
    {title: "性别",  slot: "sex", width: 100} , 
    {title: "用户头像", width: 120, slot: "avatar"} , 
    {title: "用户状态", width: 120, slot: "status"} , 
    {title: "操作", width: 240, slot: "action", align: "center"} , 
])
// 定义表单需要的数据
const data = ref([
    {
        id: 1, 
        tel: "13384011981", 
        email: "haredot2023@gmail.com",
        nickName: "haredot" ,
        realName: "霍坤点" ,
        birth: "2000/11/11",
        sex: "m" ,
        avatar: "https://file.iviewui.com/images/image-demo-1.jpg" ,
        state: 1 ,
        
    },
    {
        id: 2, 
        tel: "13312344321", 
        email: "test@git.com",
        nickName: "haredot" ,
        realName: "测试" ,
        birth: "2000/11/11",
        sex: "f" ,
        avatar: "https://file.iviewui.com/images/image-demo-2.jpg" ,
        state: 2 
    },
    {
        id: 1, 
        tel: "13384011981", 
        email: "haredot2023@gmail.com",
        nickName: "haredot" ,
        realName: "霍坤点" ,
        birth: "2000/11/11",
        sex: "m" ,
        avatar: "https://file.iviewui.com/images/image-demo-1.jpg" ,
        state: 1 
    },
    {
        id: 2, 
        tel: "13312344321", 
        email: "test@git.com",
        nickName: "haredot" ,
        realName: "测试" ,
        birth: "2000/11/11",
        sex: "f" ,
        avatar: "https://file.iviewui.com/images/image-demo-2.jpg" ,
        state: 2 
    },
    {
        id: 1, 
        tel: "13384011981", 
        email: "haredot2023@gmail.com",
        nickName: "haredot" ,
        realName: "霍坤点" ,
        birth: "2000/11/11",
        sex: "s" ,
        avatar: "https://file.iviewui.com/images/image-demo-1.jpg" ,
        state: -1 ,
        reason: "您的帐号存在刷机的风险、已被禁用、如需启用、请联系管理员"
    },
    {
        id: 1, 
        tel: "13384011981", 
        email: "haredot2023@gmail.com",
        nickName: "haredot" ,
        realName: "霍坤点" ,
        birth: "2000/11/11",
        sex: "m" ,
        avatar: "https://file.iviewui.com/images/image-demo-1.jpg" ,
        state: 1 
    },
    {
        id: 2, 
        tel: "13312344321", 
        email: "test@git.com",
        nickName: "haredot" ,
        realName: "霍坤点" ,
        birth: "2000/11/11",
        sex: "m" ,
        avatar: "https://file.iviewui.com/images/image-demo-2.jpg" ,
        state: 2 
    },
    {
        id: 1, 
        tel: "13384011981", 
        email: "haredot2023@gmail.com",
        nickName: "haredot" ,
        realName: "霍坤点" ,
        birth: "2000/11/11",
        sex: "m" ,
        avatar: "https://file.iviewui.com/images/image-demo-1.jpg" ,
        state: -1 
    },
    {
        id: 1, 
        tel: "13384011981", 
        email: "haredot2023@gmail.com",
        nickName: "haredot" ,
        realName: "霍坤点" ,
        birth: "2000/11/11",
        sex: "m" ,
        avatar: "https://file.iviewui.com/images/image-demo-1.jpg" ,
        state: -1 
    },
    {
        id: 1, 
        tel: "13384011981", 
        email: "haredot2023@gmail.com",
        nickName: "haredot" ,
        realName: "霍坤点" ,
        birth: "2000/11/11",
        sex: "m" ,
        avatar: "https://file.iviewui.com/images/image-demo-1.jpg" ,
        state: -1 
    },
   
]);


// 将用户的头像转换为 可预览的 列表
function previewList(avator) {
    return [avator] ;
}

const show = ref(false) ;
const dataRow = ref({id: null, reason: ""}); 

function addBlackList(row, index) {
    show.value = true ;
    dataRow.value = {id: row.id , reason: row.reason}
}

</script>